<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="cleartype" content="on" />
    <meta name="apple-mobile-web-app-title" content="提醒效果">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-touch-fullscreen" content="yes">
    
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
	
	<title>加载和提醒效果演示</title>
	
	<!--加载和提醒效果需要饮用的css和js-->
	<link href="jquery.mobiDialog-1.0.css" rel="stylesheet" />
	
	<script src="jquery.js" type="text/javascript"></script>
	<script src="jquery.mobiDialog-1.0.js" type="text/javascript"></script>
	<style>
		button[id^="warnBtn"], button[id^="alertBtn"], button[id^="confirmBtn"], button[id^="promptBtn"]{
			color:#fff;
			padding:10px 15px;
			border:none;
			font-size:14px;
			font-family:Microsoft YaHei;
			outline: none;
		}
		button[id$="_m"]{ 
			background:rgb(105, 165, 57);
		}
		button[id$="_t"]{ 
			background:rgb(76, 135, 244);
		}
		button[id$="_b"]{ 
			background:rgb(158, 59, 59);
		}
		.row h1{border-bottom: 1px solid #ccc;}
	</style>
	<script>
		$(function(){

			/* Top */
			//warn top
			$("#warnBtn_t").on("click",function(){
				$("body").mobiDialog({
					type : "warn", 				//消息类型，alert、confirm、prompt、warn
					text : "我是waring框！",		//消息文本
					icon : "icons/succeed.png",	//图标路径,不填或false为无图标，true为默认图标
					position : "top",		//位置 顶部，中部，底部 top middle bottom，默认为middle
					delay : 1500				//延时消失，只在alert状态下有效
				});
			});
			//alert top
			$("#alertBtn_t").on("click",function(){
				$("body").mobiDialog({
					type : "alert",
					text : "我是alert框！",
					icon : "icons/warning.png",
					position : "top",
					okText : "确定",
					okImgUrl : "",
					ok : function(){console.log("点了alert的确定");}
				});
			});
			//confirm top
			$("#confirmBtn_t").on("click",function(){
				$("body").mobiDialog({
					type : "confirm",
					text : "我是confirm框！",
					icon : "icons/question.png",
					position : "top",
					okText : "确定",
					okImgUrl : "",
					ok : function(){console.log("点了confirm的确定");},
					cancelText : "取消",
					cancelImgUrl : "",	
					cancel : function(){console.log("点了confirm的取消");}
				});
			});
			//prompt top
			$("#promptBtn_t").on("click",function(){
				$("body").mobiDialog({
					type : "prompt",
					text : "我是prompt框！",
					icon : "icons/face-smile.png",
					position : "top",
					okText : "确定",
					okImgUrl : "",
					ok : function(){console.log("点了prompt的确定");},
					cancelText : "取消",
					cancelImgUrl : "",	
					cancel : function(){console.log("点了prompt的取消");}
				});
			});

			/* Middle */
			//warn middle
			$("#warnBtn_m").on("click",function(){
				$("body").mobiDialog({
					type : "warn", 				//消息类型，alert、confirm、prompt、warn
					text : "我是waring框！",		//消息文本
					icon : "icons/succeed.png",	//图标路径,不填或false为无图标，true为默认图标
					position : "middle",		//位置 顶部，中部，底部 top middle bottom，默认为middle
					delay : 1500				//延时消失，只在alert状态下有效
				});
			});
			//alert middle
			$("#alertBtn_m").on("click",function(){
				$("body").mobiDialog({
					type : "alert",
					text : "我是alert框！",
					icon : "icons/warning.png",
					position : "middle",
					okText : "确定",
					okImgUrl : "",
					ok : function(){console.log("点了alert的确定");}
				});
			});
			//confirm middle
			$("#confirmBtn_m").on("click",function(){
				$("body").mobiDialog({
					type : "confirm",
					text : "我是confirm框！",
					icon : "icons/question.png",
					position : "middle",
					okText : "确定",
					okImgUrl : "icons/succeed.png",
					ok : function(){console.log("点了confirm的确定");},
					cancelText : "取消",
					cancelImgUrl : "icons/error.png",	
					cancel : function(){console.log("点了confirm的取消");}
				});
			});
			//prompt middle
			$("#promptBtn_m").on("click",function(){
				$("body").mobiDialog({
					type : "prompt",
					text : "我是prompt框！",
					icon : "icons/face-smile.png",
					position : "middle",
					okText : "确定",
					okImgUrl : "icons/succeed.png",
					ok : function(){console.log("点了prompt的确定");},
					cancelText : "取消",
					cancelImgUrl : "icons/error.png",	
					cancel : function(){console.log("点了prompt的取消");}
				});
			});

			/* Bottom */
			//warn bottom
			$("#warnBtn_b").on("click",function(){
				$("body").mobiDialog({
					type : "warn", 				//消息类型，alert、confirm、prompt、warn
					text : "我是waring框！",	//消息文本
					icon : "icons/succeed.png",	//图标路径,不填或false为无图标，true为默认图标
					position : "bottom",		//位置 顶部，中部，底部 top middle bottom，默认为middle
					delay : 1500				//延时消失，只在alert状态下有效
				});
			});
			//alert top
			$("#alertBtn_b").on("click",function(){
				$("body").mobiDialog({
					type : "alert",
					text : "我是alert框！",
					icon : "icons/warning.png",
					position : "bottom",
					okText : "确定",
					okUrl : "",
					ok : function(){console.log("点了alert的确定");}
				});
			});
			//confirm top
			$("#confirmBtn_b").on("click",function(){
				$("body").mobiDialog({
					type : "confirm",
					text : "我是confirm框！",
					icon : "icons/question.png",
					position : "bottom",
					okText : "确定",
					okImgUrl : "",
					ok : function(){console.log("点了confirm的确定");},
					cancelText : "取消",
					cancelImgUrl : "",	
					cancel : function(){console.log("点了confirm的取消");}
				});
			});
			//prompt top
			$("#promptBtn_b").on("click",function(){
				$("body").mobiDialog({
					type : "prompt",
					text : "我是prompt框！",
					icon : "icons/face-smile.png",
					position : "bottom",
					okText : "确定",
					okImgUrl : "",
					ok : function(){console.log("点了prompt的确定");},
					cancelText : "取消",
					cancelImgUrl : "",	
					cancel : function(){console.log("点了prompt的取消");}
				});
			});
		});
	</script>

</head>
<body>
	<div class="row">
		<h1>position:top</h1>
		<button type="button" id="warnBtn_t">warn效果</button>
		<button type="button" id="alertBtn_t">alert效果</button>
		<button type="button" id="confirmBtn_t">confirm效果</button>
		<button type="button" id="promptBtn_t">prompt效果</button>
	</div>
	<div class="row">
		<h1>position:middle</h1>
		<button type="button" id="warnBtn_m">warn效果</button>
		<button type="button" id="alertBtn_m">alert效果</button>
		<button type="button" id="confirmBtn_m">confirm效果</button>
		<button type="button" id="promptBtn_m">prompt效果</button>
	</div>
	<div class="row">
		<h1>position:bottom</h1>
		<button type="button" id="warnBtn_b">warn效果</button>
		<button type="button" id="alertBtn_b">alert效果</button>
		<button type="button" id="confirmBtn_b">confirm效果</button>
		<button type="button" id="promptBtn_b">prompt效果</button>
	</div>
</body>
</html>